<!--
描述：通用操作按钮
作者：王鑫
时间：2020-8-13
-->
<template>
  <div class="operate-button" @click="$emit('click')">
    <CommonIcon :type="icon" :size="16" v-if="icon" />
    <span>{{text}}</span>
  </div>
</template>

<script>
export default {
  name: 'OperateButton',
  props: {
    text: {
      type: String
    },
    icon: {
      type: String
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../../../framework/assets/styles/theme.less';
.operate-button {
  display: inline-flex;
  cursor: pointer;
  padding: 1px 3px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: @primary-color;
  border-bottom: solid 1px transparent;
  height: 28px;

  &:hover {
    border-color: tint(@primary-color, 20%);
  }

  &:active {
    border-color: shade(@primary-color, 5%);
  }

  span {
    margin-left: 4px;
  }
}
</style>
